<template>
  <el-dialog
      title="模型执行"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="500px"
  >
    <div class="progress">
      <div v-for="(item,index) in msg" :key="index" style="width: 100%" v-html="item"></div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="showDownLoad" type="primary" @click="downLoadResult">下载结果</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Base64 } from 'js-base64';

export default {
  name: "ProgressDialog",
  props: {
    id: {
      type: String,
      default: null,
    },
    visibleAble: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      ws: null,
      msg: [],
      showDownLoad:false,
      result:""
    }
  },
  mounted() {
    this.visible = this.visibleAble;
  },
  watch: {
    visible(val) {
      this.$emit("update:visibleAble", val)
    },
    visibleAble(val) {
      this.visible = val;
      this.showDownLoad=false;
      if (val) {
        this.connectServer()
      } else {
        this.close();
      }
    },
    id(val) {
      if (val) {
        this.connectServer()
      } else {
        this.close()
      }
    }
  },
  methods: {
    downLoadResult(){
      let path=Base64.encode(this.result)
      window.open(process.env.VUE_APP_REQUEST_URL_BASE+ "file/api/v1/downloadByPath?pathCode="+path, '_self');
    },
    close() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
      }
    },
    /**
     * 提交
     */
    connectServer() {
      if (!this.id) {
        return
      }

      let ws = new WebSocket("ws://localhost:8087/api/pushMessage/" + this.id)
      this.msg = []
      ws.onopen = function () {
        // Web Socket 已连接上，使用 send() 方法发送数据
        ws.send(JSON.stringify({
          data: 1,
          name: "11212"
        }))
      }

      ws.onmessage = (evt) => {
        let received_msg = evt.data
        if (received_msg.indexOf("isSuccess")>-1) {
          let json = JSON.parse(received_msg)
          let str=`<span class="modelName">${json.name}</span>执行<span class="${json.isSuccess ? 'successText' : 'failText'}">${json.isSuccess ? "成功" : "失败"}</span>${json.time}`
          this.msg.push(str)
          if(!json.isSuccess){
            this.msg.push(`<span class="failText">${json.msg}</span>`)
          }
          if(json.isLast&&json.isSuccess){
            this.msg.push(`结果为：<a>${json.msg}</a>`)
            this.showDownLoad=true
            this.result=json.msg;
          }


        } else {
          console.log(received_msg)
          this.msg.push(`<span>${received_msg}</span>`)

        }

      }

      ws.onclose = function () {

      };
      this.ws = ws;
    }

  }


}
</script>

<style lang="less">
.progress {
  width: 100%;
  height: 300px;
  overflow-x: hidden;
  overflow-y: auto;

  .modelName {
    font-weight: bold;
    color: #67C23A;
  }
  .successText{
    color: #67C23A;
  }
  .failText{
    color: red;
  }
}
</style>
